<template>
  <div class="app-container" style="height: 100%; padding-bottom: 0">
    <el-container style="height: calc(100% - 56px)">
   <el-main style="padding: 0 0 0 20px">
      <el-form ref="queryForm" :model="queryParams" size="mini" inline style="white-space: nowrap; overflow-x: auto" :class="{ disabled: disableAction }" @submit.native.prevent>
        <el-form-item label="检查版本">
          <el-input v-model="versionCode" :disabled = "true"></el-input>
        </el-form-item>
        <el-form-item label="检查编码">
          <el-input v-model="checkitemCode" :disabled = "true"></el-input>
        </el-form-item>
        <el-form-item prop="content">
          <el-input v-model.trim="queryParams.content" placeholder="请输入验收标准内容" clearable />
        </el-form-item>
        <el-form-item prop="seriousLevel">
          <el-select v-model="queryParams.seriousLevel" placeholder="严重等级" clearable style="width: 120px">
            <el-option v-for="dict in dict.type.sys_standard_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item prop="modules">
          <el-select v-model="queryParams.modules" placeholder="模块" clearable style="width: 120px">
            <el-option v-for="dict in dict.type.cq_data_modules" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item prop="blocks">
          <el-select v-model="queryParams.blocks" placeholder="分块" clearable style="width: 120px">
            <el-option v-for="dict in dict.type.cq_data_blocks" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" icon="el-icon-refresh" :disabled="loading" @click="resetQuery">重置</el-button>
          <el-button size="mini" type="primary"  @click="$refs.EditCheckStandard.open({ checkitemCode,versionCode })">选择标准</el-button>
        </el-form-item>
      </el-form>

      <el-table class="standards-table" v-loading="loading" :data="filteredList" size="small" highlight-current-row :height="`calc(100% - ${showRdcRule ? 500 : 50}px)`" style="min-height: 200px" @current-change="handleCurrentChange">
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="工序" align="center" width="200" show-overflow-tooltip>
          <span slot-scope="{ row }">{{ row.tabType }}</span>
        </el-table-column>
        <el-table-column label="验收标准" prop="content" show-overflow-tooltip min-width="300">
          <span slot-scope="{ row }" :style="{ color: ['2', '3'].includes(row.seriousLevel) ? 'red' : '' }">{{ row.seriousLevel == '3' ? '*' : '' }} {{ row.content }}</span>
        </el-table-column>
        <el-table-column label="模块" align="center" show-overflow-tooltip>
          <dict-tag slot-scope="{ row }" :options="dict.type.cq_data_modules" :value="row.modules" />
        </el-table-column>
        <el-table-column label="分块" align="center" show-overflow-tooltip width="100">
          <dict-tag slot-scope="{ row }" :options="dict.type.cq_data_blocks" :value="row.blocks" />
        </el-table-column>
        <el-table-column label="部位" align="center" show-overflow-tooltip>
          <dict-tag slot-scope="{ row }" :options="dict.type.cq_data_positions" :value="row.positions" />
        </el-table-column>
        <el-table-column label="数据归集" align="center" show-overflow-tooltip>
          <dict-tag slot-scope="{ row }" :options="dict.type.cq_data_collections" :value="row.dataCollections" />
        </el-table-column>
        <el-table-column label="质量分类" align="center" show-overflow-tooltip>
          <dict-tag slot-scope="{ row }" :options="dict.type.cq_location_type" :value="row.locationType" />
        </el-table-column>
        <el-table-column label="排序" prop="seq" align="center" width="50" />
      </el-table>
      <EditEvalRule ref="EditEvalRule" />
    </el-main>
      <EditCheckStandard ref="EditCheckStandard" v-model="showEditCheckStandard" @closed="()=>getItemStandardList()"  />
    <div slot="footer">
      <el-button :disabled="btnLoading" @click="show = false">关闭</el-button>
    </div>
    </el-container>
  </div>
</template>
<script>

import { nameRule } from '@/utils/validate'
import { debounce, flatList2tree, isLikeOrEqual } from '@/utils'
import { editFormMixin } from '@/utils/mixin'
import { addChkitem, updateChkitem } from '@/api/checkScore/cqEval'
import { listCheckType, listCheckTable, listCheckSc, listRdcCourse, listCheckStandard, delCheckStandard,listCheckItemStandard } from '@/api/qualityManage/cq'
import EditEvalRule from '../../cq/components/EditEvalRule'
import EditCheckStandard from './EditEvalCheckStandard'



export default {
  mixins: [editFormMixin],
  components: { EditEvalRule,EditCheckStandard },
  dicts: ['sys_standard_type', 'cq_data_modules', 'cq_data_blocks', 'cq_data_positions', 'cq_data_collections', 'cq_process_type', 'cq_location_type'],
  filters: {
    processTypeFilter(val, value2label = {}) {
      const str = val || ''
      return str
        .split(',')
        .map(i => value2label[i])
        .filter(i => i)
        .join('，')
    }
  },
  data() {
    return {
      primaryKey: 'chkitemId',
      addApi: addChkitem,
      updateApi: updateChkitem,
      list:[],
      loading:false,
      filteredList: [],
      showEditCheckStandard: false,
      showRdcRule: false, // 显示抽检规则

      queryParams: {
        content: '',
        seriousLevel: '',
        rdcCourses: '',
        modules: '',
        blocks: ''
      },
      checkTypeList: [], // 阶段
      checkTableList: [], // 工序
      checkTypeLoading: false,
      checkTableLoading: false,
      currTypeId: '', // 当前选中阶段ID
      currTableId: '', // 当前选中工序ID
      currTableName: '',
      versionCode: '',
      checkitemCode:'',

      specialTypes: [], // 专业类别
      rules: {
        chkitemCode: [{ required: true, message: '请输入检查项编码' }, nameRule],
        chkitemName: [{ required: true, message: '请输入检查项名称' }]
      },
      treeOptions: []
    }
  },
  watch: {
    currTab(val) {
      this.resetQuery()
      this.getCheckTableList()
    },
    currTypeId(val) {
      this.$refs.tree.filter(this.currTableName)
    },
    currTableName(val) {
      this.$refs.tree.filter(val)
    },
    queryParams: {
      deep: true,
      handler() {
        this.handleQueryDebounce()
      }
    }
  },

  computed: {
    disableAction() {
      return this.checkTypeLoading || this.checkTableLoading || this.loading
    },
    isSc() {
      return this.currTab === 'sc'
    },
    isCourse() {
      return this.currTab === 'course'
    },
    showTableName() {
      return this.isCourse ? '抽检流程' : '工序名称'
    },
    idField() {
      return this.isCourse ? 'courseId' : this.isSc ? 'scId' : 'tableId'
    },
    listApi() {
      return this.isCourse ? listRdcCourse : this.isSc ? listCheckSc : listCheckTable
    },
    paramOfListAll() {
      return this.isCourse ? 0 : 'all'
    }
  },
  created() {
    this.handleQueryDebounce = debounce(this.handleQuery)
    this.versionCode = this.$route.query?.versionCode || ''
    this.checkitemCode = this.$route.query?.checkitemCode || ''
    this.getItemStandardList();
  },
  methods: {

    async getItemStandardList(){
      console.log("111")
      const opt = {
        "checkitemCode":this.checkitemCode,"versionCode":this.versionCode
      }
      this.loading = true
      const res = await listCheckItemStandard(opt).catch(() => false)
      this.loading = false
      if (res === false) return (this.list = [])

      const data = res.data || []
      data.map(i => (i.removeLoading = false))
      this.list = data
      this.handleQuery()
    },
    handleQuery() {
      // 本地过滤
      const { content, seriousLevel, rdcCourses, modules, blocks } = this.queryParams
      const opts = { like: { content, rdcCourses }, eq: { seriousLevel, modules, blocks } }
      this.filteredList = this.list.filter(i => isLikeOrEqual(i, opts))
    },
    handleCurrentChange(item) {
      const show = !!item?.itemStandardId && item.rdcCourses
      this.showRdcRule = show
      show ? this.$refs.EditEvalRule?.open({ sourceId: item.itemStandardId }, { rdcCourses: item.rdcCourses }) : this.$refs.EditEvalRule?.resetFields()
    },
    resetQuery() {setCurrentKey
      this.currTypeId = ''
      this.currTableId = ''
      this.currTableName = ''
      this.getItemStandardList();
      this.resetForm('queryForm')
    },
    resetFields() {
      this.$refs.form.resetFields()
    },

  }
}
</script>

